<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>角色管理</title>
		<link href="../../../component/pear/css/pear.css" rel="stylesheet" />
		<style>
			.layui-card-body .layui-form-item{
				margin-bottom: 0px;
			}
		</style>
	</head>
	<body class="pear-container">
		<div class="layui-card">
			<div class="layui-card-body">
				<form class="layui-form" action="">
					<div class="layui-form-item">
						<div class="layui-form-item layui-inline">
							<label class="layui-form-label">角色名</label>
							<div class="layui-input-inline">
								<input type="text" name="name" placeholder="" class="layui-input">
							</div>
						</div>
						<div class="layui-form-item layui-inline">
							<button class="pear-btn pear-btn-md pear-btn-primary" lay-submit lay-filter="user-query">
								<i class="layui-icon layui-icon-search"></i>
								查询
							</button>
							<button type="reset" class="pear-btn pear-btn-md">
								<i class="layui-icon layui-icon-refresh"></i>
								重置
							</button>
						</div>
					</div>
				</form>
			</div>
		</div>
		<div class="layui-card">
			<div class="layui-card-body">
				<table id="role-table" lay-filter="role-table"></table>
			</div>
		</div>
		
		<script type="text/html" id="role-toolbar">
			<button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
				<i class="layui-icon layui-icon-add-1"></i>
				新增
			</button>
			<button class="pear-btn pear-btn-danger pear-btn-md" lay-event="batchRemove">
				<i class="layui-icon layui-icon-delete"></i>
				删除
			</button>
		</script>
		
		<script type="text/html" id="role-bar">
			<button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit"><i class="layui-icon layui-icon-edit"></i></button>
			<button class="pear-btn pear-btn-warming pear-btn-sm" lay-event="give"><i class="layui-icon layui-icon-vercode"></i></button>
			<button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove"><i class="layui-icon layui-icon-delete"></i></button>
		</script>
		
		<script type="text/html" id="role-enable">
			<input type="checkbox" name="enable" value="{{d.id}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="role-enable" checked = "{{ d.enable == 0 ? 'true' : 'false' }}">
		</script>
		
		<input id="id" type="text" class="layui-hide"/>

		<script src="../../../component/layui/layui.js"></script>
		<script src="../../../component/pear/pear.js"></script>
		<script>
		    layui.use(['table','form','jquery','permission','context','popup','common'],function () {
		        let table = layui.table;
		        let form = layui.form;
		        let $ = layui.jquery;
				let common = layui.common;
				let permission = layui.permission;
				let context = layui.context;
				let popup = layui.popup;
		
		        let basePath = context.get("base-path");
		
		        let cols = 
				[[
		                {type:'checkbox'},
		                {title: '编号', field: 'id', align:'center', width:100},
		                {title: '名称', field: 'name', align:'center'},
		                {title: '描述', field: 'remark', align:'center'},
		                {title: '是否可用', field: 'enable', align:'center', templet:'#role-enable'},
		                {title: '操作', toolbar: '#role-bar', align:'center', width:195}
		        ]]
		
		        table.render({
		            elem: '#role-table',
		            url: basePath + '/api/role/list',
		            page: true ,
		            cols: cols ,
		            skin: 'line',
		            toolbar: '#role-toolbar',
		            defaultToolbar: [{
		            	layEvent: 'refresh',icon: 'layui-icon-refresh'},
		            	 'exports',
		            	 'filter',
		            	 'print'
		            ],
		            request: {
		                pageName: 'PageIndex',
		                limitName: 'PageSize' 
		            },
		            parseData: function(res){ 
		                return {
		                  "count": res.data.totalCount,
		            	  'statusCode': res.statusCode,
		            	  'data':res.data.items
		                };
		            },
		            response: {
		                statusName: 'statusCode',
		                statusCode: 200
		            }
		        });
		
		        table.on('tool(role-table)', function(obj){
		            if(obj.event === 'remove'){
		                window.remove(obj);
		            } else if(obj.event === 'edit'){
		                window.edit(obj);
		            } else if (obj.event === 'give') {
						window.give(obj);
					}
		        });
		
		        table.on('toolbar(role-table)', function(obj){
		            if(obj.event === 'add'){
		                window.add();
		            } else if(obj.event === 'refresh'){
		                window.refresh();
		            } else if(obj.event === 'batchRemove'){
		                window.batchRemove(obj);
		            }
		        });
		
		        form.on('submit(role-query)', function(data){
		            table.reload('role-table',{where:data.field})
		            return false;
		        });
		
		        // 后续会提供单独接口
		        form.on('switch(role-enable)', function(obj) {
		        	$.ajax({
		        		url: basePath + '/api/role/'+this.value+'/modify',
		        		data: JSON.stringify({"enable":obj.elem.checked}),
		        		dataType: 'json',
		        		contentType: 'application/json',
		        		type: 'put',
		        		success: function(result) {
		        			if(result.succeeded){
		        			    popup.success("操作成功");
		        			}else{
		        			    popup.failure("操作失败");
		        			}
		        		}
		        	})
		        });
		
		        window.add = function(){
		            layer.open({
		                type: 2,
		                title: '新增角色',
		                shade: 0.1,
		                area: ['500px', '400px'],
		                content: 'add.html'
		            });
		        }
				
				window.give = function(obj) {
					$("#id").val(obj.data['id']);
					layer.open({
						type: 2,
						title: '分配',
						shade: 0.1,
						area: ['400px', '500px'],
						content: 'give.html?id=' + obj.data['id']
					});
				}
			
		        window.power = function(obj){
		            layer.open({
		                type: 2,
		                title: '授权',
		                shade: 0.1,
		                area: ['320px', '400px'],
		                content: MODULE_PATH + 'edit.html'
		            });
		        }
		
		        window.edit = function(obj){
					$("#id").val(obj.data['id']);
		            layer.open({
		                type: 2,
		                title: '修改',
		                shade: 0.1,
		                area: ['500px', '400px'],
		                content: 'edit.html?id='+obj.data['id']
		            });
		        }
		
		        window.remove = function(obj) {
		        	layer.confirm('确定要删除该角色', {
		        		icon: 3,
		        		title: '提示'
		        	}, function(index) {
		        		layer.close(index);
						let roleIds = new Array();
						roleIds.push(obj.data['id']);
		        		let loading = layer.load();
		        		$.ajax({
		        			url: basePath + "/api/role",
		        			contentType: 'application/json',
							dataType:"json",
							data:JSON.stringify(roleIds),
		        			type: 'delete',
		        			success: function(result) {
		        				layer.close(loading);
		        				if (result.succeeded) {
		        					popup.success("删除成功",function(){
		        						obj.del();
		        					});
		        				} else {
		        					popup.failure("删除失败");
		        				}
		        			}
		        		})
		        	});
		        }
		
		        window.batchRemove = function(obj){
		            var checkIds = common.checkField(obj,'id');
					if(checkIds === ""){
		                layer.msg("未选中数据",{icon:3,time:1000});
		                return false;
		            }
		            layer.confirm('确定要删除选中用户', {icon: 3, title:'提示'}, function(index){
		                layer.close(index);
						var roleIds= new Array(); //定义一数组
						roleIds=checkIds.split(","); //字符分割
		                let loading = layer.load();
		                $.ajax({
		                    url: basePath + "/api/role",
							contentType: 'application/json',
							dataType:"json",
							data:JSON.stringify(roleIds),
		                    type:'delete',
		                    success:function(result){
		                        layer.close(loading);
		                        if (result.succeeded) {
									popup.success("删除成功",function(){
										table.reload("role-table");
									});
								} else {
									popup.failure("删除失败");
								}
		                    }
		                })
		            });
		        }
		
		        window.refresh = function(){
		            table.reload('role-table');
		        }
		    })
		</script>
	</body>
</html>
